<template>
  <div class="app-container">
    <el-tabs tab-position="left" type="border-card" style="height: calc(100vh - 100px)">
      <el-tab-pane :label="$t('user')+$t('info')">
        <div style="height: calc(100vh - 120px)" class="uni-scroll pr-2">
          <el-form label-width="150px">
            <el-form-item>
              <el-image
                style="width: 80px;height: 80px"
                :src="user.iconUrl"
                fit="fit"
              >
                <div slot="error" class="image-slot">
                  <i style="font-size: 50px" class="el-icon-picture-outline"/>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item :label="$t('user')+$t('name')">
              <el-input v-model="user.userName"/>
            </el-form-item>
            <el-form-item :label="$t('real')+$t('name')">
              <el-input v-model="user.realName"/>
            </el-form-item>
            <el-form-item :label="$t('language')">
              <el-select v-model="user.language">
                <el-option
                  v-for="item of languageList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('sex')">
              <el-input v-model="user.sex"/>
            </el-form-item>
            <el-form-item :label="$t('birthday')">
              <el-date-picker
                v-model="user.birthday"
                value-format="timestamp"
                type="date"
              />
            </el-form-item>
            <el-form-item :label="$t('email')">
              <el-input v-model="user.email"/>
            </el-form-item>
            <el-form-item :label="$t('phoneNumber')">
              <el-input v-model="user.phoneNumber"/>
            </el-form-item>
            <el-form-item :label="$t('map')">
              <div
                ref="userMap"
                style="height: 300px; width: 80%;"
              />
            </el-form-item>
            <el-form-item :label="$t('address')">
              <el-input v-model="user.address"/>
            </el-form-item>
            <el-form-item :label="$t('singleLogin')">
              <el-switch
                v-model="user.singleLogin"
                :active-text="$t('open')"
                :inactive-text="$t('close')"
              />
            </el-form-item>
            <el-form-item :label="$t('safe')+$t('login')">
              <el-switch
                v-model="user.safeLogin"
                :active-text="$t('open')"
                :inactive-text="$t('close')"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateUser">{{ $t('save') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('update')+$t('password')">
        <password/>
      </el-tab-pane>
      <el-tab-pane :label="$t('developers')">
        <secret/>
      </el-tab-pane>
      <el-tab-pane :label="$t('push')">
        <push-config/>
      </el-tab-pane>
      <el-tab-pane :label="$t('device')+$t('explain')+$t('warn')+$t('config')">
        <device-explain-warn/>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { getNetModel, getUserIconUrl, getUserName } from '@/util/storage'
import { getInfo, updateUser } from '@/api/auth/authUserApi'
import { listLanguage, successNotice } from '@/util/common'
import PushConfig from './components/PushConfig'
import DeviceExplainWarn from './components/DeviceExplainWarn'
import Secret from './components/Secret'
import Password from './components/Password'
import { addMapClickListener, clearAndMakeMarket, makeMap, makeMarket } from '@/util/mapTool'

export default {
  name: 'UserCenter',
  components: {
    PushConfig,
    DeviceExplainWarn,
    Secret,
    Password
  },
  data() {
    return {
      user: {
        iconUrl: getUserIconUrl(),
        userName: getUserName(),
        singleLogin: null,
        safeLogin: null,
        email: null,
        phoneNumber: null,
        realName: null,
        address: null,
        sex: null,
        birthday: null
      },
      map: {},
      netModel: getNetModel(),
      language: null,
      languageList: []
    }
  },
  mounted() {
    this.languageList = listLanguage(this)
    this.getInfo()
  },
  methods: {
    getInfo() {
      getInfo({}).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.user = data
          this.user.birthday = this.user.birthday * 1000
          const that = this
          this.map = makeMap(this.$refs.userMap, data.lat, data.lng, 8)
          makeMarket(this.map, data.lat, data.lng)
          addMapClickListener(this.map, function(e) {
            clearAndMakeMarket(that.map, e.latLng.lat, e.latLng.lng)
          })
        }
      })
    },
    updateUser() {
      updateUser({
        ...this.user,
        birthday: Math.round(this.birthday / 1000)
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
      })
    }
  }
}
</script>
